import { Form, Input, Modal, Select } from 'antd'
import { useImperativeHandle, useState } from 'react'
interface Props {
  nref: React.MutableRefObject<
    | {
        showModal: (type: string) => void
      }
    | undefined
  >
}
function CreateUser(props: Props) {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const showModal = () => {
    setIsModalOpen(true)
  }
  //暴露的方法给父组件调用
  useImperativeHandle(props.nref, () => ({
    showModal
  }))
  const handleOk = () => {
    setIsModalOpen(false)
  }
  const handleCancel = () => {
    setIsModalOpen(false)
  }
  return (
    <div>
      <Modal title='Basic Modal' open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form>
          <Form.Item label='用户名' name='userName'>
            <Input placeholder='请输入用户名'></Input>
          </Form.Item>
          <Form.Item label='用户邮箱' name='userEmail'>
            <Input placeholder='请输入用户邮箱'></Input>
          </Form.Item>
          <Form.Item label='手机号' name='mobile'>
            <Input placeholder='请输入用户手机号'></Input>
          </Form.Item>
          <Form.Item label='部门' name='deptId'>
            <Select>
              <Select.Option value='sample'>Sample</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label='岗位' name='job'></Form.Item>
          <Form.Item label='状态' name='state'></Form.Item>
          <Form.Item label='系统角色' name='role'></Form.Item>
          <Form.Item label='用户头像' name='userImg'></Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default CreateUser
